<template>
  <div class="bodyMap">
    <div style="display: flex;justify-content: center;align-items: center">
<!--      <span class="text">雷达</span>-->
    </div>
    <div v-loading="loading || loadingQy" id="mapDivWx"
      ref="mapDivWx" :style="{ width: '100%', height: '78vh' }">
      <div class="radarPane" v-show="checkedList.indexOf(3) != -1">
        <div class="colorbar">
          <div class="row-block">
            <div class="one" style="background-color: rgb(1, 160, 246)">小</div>
            <div class="one" style="background-color: rgb(0, 236, 236)"></div>
            <div class="one" style="background-color: rgb(0, 216, 0)"></div>
            <div class="one" style="background-color: rgb(0, 144, 0)"></div>
            <div class="one" style="background-color: rgb(255, 255, 0)"></div>
            <div class="one" style="background-color: rgb(231, 192, 0)"></div>
            <div class="one" style="background-color: rgb(255, 144, 0)">中</div>
            <div class="one" style="background-color: rgb(255, 0, 0)"></div>
            <div class="one" style="background-color: rgb(214, 0, 0)"></div>
            <div class="one" style="background-color: rgb(192, 0, 0)"></div>
            <div class="one" style="background-color: rgb(255, 0, 240)"></div>
            <div class="one" style="background-color: rgb(150, 0, 180)"></div>
            <div class="one" style="background-color: rgb(173, 144, 240)">大</div>
          </div>
        </div>
      </div>
      <transition name="fade">
        <detection-point-wx v-if="this.checkedList.indexOf(1) != -1 && !loadingQy" @renderPoints="renderPoints"
                         :newCompanyTqList="newCompanyTqList" class="tableInfo" @shrink="shrink"/>
      </transition>
    </div>
    <div class="mapPlayComp" v-show="checkedList.indexOf(3) != -1">
      <i style="font-size: 0.6rem;color: #3196FA" class="iconfont icon-zuoqiehuan" @click="previousMap"/>
      <i style="font-size: 0.6rem;color: #3196FA" v-if="sliderPlay" class="iconfont icon-bofang" @click="playLay"/>
      <i style="font-size: 0.6rem;color: #3196FA" v-else class="iconfont icon-weibiaoti--" @click="playLayOff"/>
      <i style="font-size: 0.6rem;color: #3196FA" class="iconfont icon-youqiehuan" @click="nextMap"/>
      <div class="mySlider">
        <el-slider
          v-model="sliderVal"
          :step="1"
          :max="20"
          @change="getSliderVal"
          show-stops
        >
        </el-slider>
        <!--            :format-tooltip="formatTooltip"-->
      </div>
    </div>
    <div class="mapButton">
      <el-row style="margin-bottom: 0.5rem">
        <el-col :span="6" :class="checkedList.indexOf(1) != -1?'menuTextCol':'menuText'" @click.native="checkOpen(1)">
          <img v-if="checkedList.indexOf(1) != -1" class="menuImg" src="./assets/a-qxNew.png">
          <img v-else class="menuImg" src="./assets/a-qx@2x.png">
          <div>
            气象
          </div>
        </el-col>
        <el-col :span="6" :class="checkedList.indexOf(2) != -1?'menuTextCol':'menuText'" @click.native="checkOpen(2)">
          <img v-if="checkedList.indexOf(2) != -1" class="menuImg" src="./assets/a-yjNew.png">
          <img v-else class="menuImg" src="./assets/a-yj@2x.png">
          <div>
            预警
          </div>
        </el-col>
        <el-col :span="6" :class="checkedList.indexOf(3) != -1?'menuTextCol':'menuText'" @click.native="checkOpen(3)">
          <img v-if="checkedList.indexOf(3) != -1" class="menuImg" src="./assets/a-ld@2x.png">
          <img v-else class="menuImg" src="./assets/a-ldNew.png">
          <div>
            雷达
          </div>
        </el-col>
        <el-col :span="6" :class="checkedList.indexOf(4) != -1?'menuTextCol':'menuText'" @click.native="checkOpen(4)">
          <img v-if="checkedList.indexOf(4) != -1" class="menuImg" src="./assets/a-fxNew.png">
          <img v-else class="menuImg" src="./assets/a-fx@2x.png">
          <div>
            风向
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" :class="checkedList.indexOf(5) != -1?'menuTextCol':'menuText'" @click.native="checkOpen(5)">
          <img v-if="checkedList.indexOf(5) != -1" class="menuImg" src="./assets/a-jylNew.png">
          <img v-else class="menuImg" src="./assets/a-jsl@2x.png">
          <div>
            降水量
          </div>
        </el-col>
        <el-col :span="6" :class="checkedList.indexOf(6) != -1?'menuTextCol':'menuText'" @click.native="checkOpen(6)">
          <img v-if="checkedList.indexOf(6) != -1" class="menuImg" src="./assets/a-sdNew.png">
          <img v-else class="menuImg" src="./assets/a-sd@2x.png">
          <div>
            相对湿度
          </div>
        </el-col>
        <el-col :span="6" :class="checkedList.indexOf(7) != -1?'menuTextCol':'menuText'" @click.native="checkOpen(7)">
          <img class="menuImg" src="./assets/a-tqqk@2x.png">
          <div>
            天气情况
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import {formatDate, formatDateDay, formatDateTime, getFX} from "@/utils";
import {cityInformation} from "@/utils/city-information";
import {getWeatherSearch, newWarningInfo, newWarningInfoData, warnIngInfo, weatherInfo} from "@/api/cityInfo";
import 'lib-flexible';
import "qweather-icons/font/qweather-icons.css";
import detectionPointWx from "@/wxViews/components/detectionPointWx.vue";
import newCity from "@/utils/city-infoJson/newCity.json";
import doc from "@/components/RuoYi/Doc/index.vue";

export default {
  name: "wxMap",
  components:{
    detectionPointWx
  },
  data(){
    return {
      sliderPlay: true,
      loading: false,
      loadingQy: false,
      sliderVal: 0,
      radio: 3,
      map: null,
      myImageLayer: [],
      leiDanfoData: [],
      AMap: null,
      companyTqList: [],
      newCompanyTqList: [],
      companyYjList: [],
      listTq: [],
      listNewTq: [],
      listYj: [],
      listFx: [],
      listJs: [],
      listSd: [],
      lastDatar: null,
      weatherLastDatar: null,
      leiDaLastDatar: null,
      checkedList: [1],
      futureWeatherList: [],
      futureWeatherFifteenList: [],
      weatherNowData: {},
      chart: null,
      dragging: false,
      scrollContainer: {},
      listMake: [],
      newCityMap:[],
      renderPointsList:undefined
    }
  },
  mounted() {
    this.radio = this.$route.query.radio || "";
    if (this.radio != 1){
      this.checkedList.push(Number(this.radio))
    }
    this.info()
    this.getWeather()
    this.getWeatherNewSearch()
    // this.getFutureWeather();
    // this.getFutureWeatherForFifteen();
  },
  methods:{
    async getWeatherNewSearch(){
      await getWeatherSearch().then(res =>{
        if (res.code == 200){
          this.newCityMap = res.data
          this.getNewWeather()
        }
      })
    },
    //初始化地图
    info() {
      let that = this;
      let map = null;
      window._AMapSecurityConfig = {
        securityJsCode: "41e17bd194dc80120ab5e431f6e5264e",
      };
      AMapLoader.load({
        key: "e9f5683c5fe13b606dc1179f1e503062", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.MapType",
          "AMap.Geolocation",
          "AMap.DistrictSearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(async (AMap) => {
          let obj = {
            center: [114.890829, 36.911746],
            resizeEnable: true,
            showLabel: true,
            viewMode: "3D",
            expandZoomRange: true,
            zoom: 8,
          };
          // if (that.radio != 3){
          //   obj.mask = mask
          //   obj.zoom = 9.8
          //   obj.zooms = [9,13]
          // }
          map = new AMap.Map("mapDivWx", obj);

          // 地图添加各种控件
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());
          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());
          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          // map.addControl(new AMap.Geolocation())
          //获取边界坐标点
          AMap.plugin("AMap.DistrictSearch", function () {
            let districtSearch = new AMap.DistrictSearch({
              // 关键字对应的行政区级别，共有5种级别
              level: "province",
              //  是否显示下级行政区级数，1表示返回下一级行政区
              subdistrict: 0,
              // 返回行政区边界坐标点
              extensions: "all",
            });

            districtSearch.search("聊城", (status, result) => {
              // 查询成功时，result即为对应的行政区信息
              let bounds = result.districtList[0].boundaries;
              if (bounds) {
                for (let i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  let polygon = new AMap.Polygon({
                    map: map, // 指定地图对象
                    strokeWeight: 2, // 轮廓线宽度
                    path: bounds[i], //轮廓线的节点坐标数组
                    fillOpacity: 0.6, //透明度
                    fillColor: "", //填充颜色
                    strokeColor: "#3a8670", //线条颜色
                  });
                  polygon.on("click", (value) => {
                    that.getTwoHoursWeather(value.lnglat.lat, value.lnglat.lng);
                  });
                }
              }
            });
          });
          map.setCenter([115.9984837, 36.4551603]);
          that.map = map;
          that.AMap = AMap;
          map.on("click", (value) => {
            that.getTwoHoursWeather(value.lnglat.lat, value.lnglat.lng);
          });

          if (that.radio == 1) {
            that.weatherLastDatar = setInterval(async () => {
              await that.getWeather();
              await that.getNewWeather();
            }, 1000 * 60 * 15);
            if (that.leiDaLastDatar) {
              clearInterval(that.leiDaLastDatar);
            }
          } else if (that.radio == 2) {
            if (that.weatherLastDatar) {
              clearInterval(that.weatherLastDatar);
            }
            if (that.leiDaLastDatar) {
              clearInterval(that.leiDaLastDatar);
            }
            let oldData = localStorage.getItem("nowDataTime");
            if (oldData == null) {
              await that.getWarning();
            } else {
              let date = new Date(oldData).getTime();
              let nowData = new Date().getTime();
              let diff = nowData - date;
              if (diff >= 1000 * 60 * 60 * 6) {
                await that.getWarning();
              } else {
                that.companyYjList = JSON.parse(
                  localStorage.getItem("companyYjList")
                );
                await that.setMarkerWarning();
              }
            }
          } else {
            if (that.weatherLastDatar) {
              clearInterval(that.weatherLastDatar);
            }
            await that.getLeiDaInfo();
            that.leiDaLastDatar = setInterval(async () => {
              if (that.myImageLayer.length > 0) {
                that.map.remove(that.myImageLayer);
              }
              await that.getLeiDaInfo();
            }, 1000 * 60 * 15);
          }
        })
        .catch((e) => {
          console.log("错误", e);
        });
    },
    //获取未来2小时天气预报
    async getTwoHoursWeather(lat, lng) {
      let newLat = lat.toFixed(2);
      let newLng = lng.toFixed(2);
      // let httpUrl = `https://api.seniverse.com/v4?fields=precip_minutely&key=SfOcYG07nsrQQ2w8G&locations=${lat}:${lng}`
      // let resJson = await fetch(httpUrl)
      // let res = await resJson.json()
      // let resJson = await weatherInfo({location:newLng+','+newLat,lang:'zh',cityName:'聊城'})
      // let res = JSON.parse(resJson.data)
      let httpUrl = `https://devapi.qweather.com/v7/minutely/5m?location=${
        newLng + "," + newLat
      }&lang=zh&key=cc977749066e45cca107881c1fbaf061`;
      let resJson = await fetch(httpUrl);
      let res = await resJson.json();
      if (this.listMake.length > 0) {
        this.map.remove(this.listMake);
        this.listMake = [];
      }
      let infoWindow = new AMap.InfoWindow({
        content: res.summary,
        offset: new AMap.Pixel(0, -10),
      });
      let marker = new AMap.Marker({
        content: `<div style="width: 0.4rem;height: 0.4rem;background-color: #FFFFFF;border-radius: 50%;display: flex;
  justify-content: center;align-items: center;box-shadow: 0 0 0.5rem rgb(0,0,0)">
  <div style="width: 0.2rem;height: 0.2rem;border-radius: 50%;background-color: #ffd767"/></div>`,
        map: this.map,
        position: new AMap.LngLat(lng, lat),
        offset: new AMap.Pixel(-8, -8),
      });
      this.listMake.push(marker);
      infoWindow.open(this.map, [lng, lat]);
      infoWindow.on("close", () => {
        this.map.remove(this.listMake);
      });
    },
    //获取实时天气信息
    async getWeather() {
      this.loading = true;
      this.companyTqList = [];
      //清空点坐标
      this.emptyingPointsTq();
      cityInformation.map(async (item) => {
        let resJson = await weatherInfo({
          location: item.id,
          lang: "zh",
          cityName: item.name,
        });
        let res = await JSON.parse(resJson.data);
        this.companyTqList.push({
          ...item,
          ...res.now,
        });
        if (cityInformation.length <= this.companyTqList.length) {
          this.loading = false;
          await this.setMarker();
        }
      });
      // this.companyTqList = csDataLHYLL
      await this.setMarker();
    },
    //渲染实时天气点数据
    async setMarker() {
      let that = this;
      this.listTq = [];
      this.companyTqList.map(async (item) => {
        let info = [];
        info.push(
          '<div class="mapMakerInfo">' +
          '<div class="titleMaker" style="display: flex;">' +
          '<div class="makerTitleSty">${name} ${text}</div><div class="makerTitleStyVal">${obsTime}</div>' +
          '</div>'
        );
        info.push('<div class="makerData"><span class="makerDataTitle">温度</span><span class="makerValSty"> ${temp}℃</span></div>')
        // info.push(
        //   '<p><span>风向 : ${windDir}</span><span style="margin-left: 15px;">风力等级 : ${windScale}</span></p>'
        // );
        info.push(
          '<div class="makerData"><span class="makerDataTitle">风速</span><span class="makerVal"> ${windSpeed} km/H</span><span class="makerVal" style="margin-left: 0.5rem;">${windDir}</span></div>'
        );
        info.push(
          '<div class="makerData"><span class="makerDataTitle">降水量</span><span class="makerVal"> ${precip} mm/H</span></div>'
        );
        info.push(
          '<div class="makerData"><span class="makerDataTitle">气压</span><span class="makerVal"> ${pressure} Hpa</span></div>'
        );
        info.push(
          '<div class="makerData"><span class="makerDataTitle">能见度</span><span class="makerVal"> ${vis} km</span></div>'
        );
        info.push('<div class="makerData"><span class="makerDataTitle">相对湿度</span><span class="makerVal"> ${humidity}%</span></div></div></div>');

        let data = info.join("");
        // data = data.replace('${icon}', item.icon)
        data = data.replace("${name}", item.name);
        data = data.replace("${text}", item.text);
        data = data.replace("${obsTime}", formatDateTime(item.obsTime));
        data = data.replace("${temp}", item.temp);
        data = data.replace("${windDir}", item.windDir);
        data = data.replace("${windScale}", item.windScale);
        data = data.replace("${windSpeed}", item.windSpeed);
        data = data.replace("${humidity}", item.humidity);
        data = data.replace("${precip}", item.precip);
        data = data.replace("${pressure}", item.pressure);
        data = data.replace("${vis}", item.vis);
        let infoWindow = new AMap.InfoWindow({
          content: data,
          offset: new AMap.Pixel(5, -30),
        });
        let marker = new AMap.Marker({
          content: `<div><i style="color: #393eff;font-size: 20px" class="qi-${item.icon}"/><div style="font-size: 14px">${item.temp}℃</div></div>`,
          map: this.map,
          position: new AMap.LngLat(item.lon, item.lat),
          // offset: new AMap.Pixel(-13, -30)
        });
        marker.on("mouseover", function () {
          infoWindow.open(that.map, [
            marker.getPosition().lng,
            marker.getPosition().lat,
          ]);
        });
        marker.on("mouseout", function () {
          infoWindow.close();
        });
        this.listTq.push(marker);
      });
    },
    //获取区域点天气信息
    async getNewWeather(){
      this.loadingQy = true;
      this.newCompanyTqList = [];
      //清空区域点坐标
      this.emptyingPointsNewTq();
      let date = new Date()
      let endtime = formatDate(date).replace(/-/g,"/")
      date.setHours(date.getHours() - 2);
      let stateTime = formatDate(date).replace(/-/g,"/")
      let list = []
      this.newCityMap.map(async (item) =>{
        list.push(item.STATIONCODE)
      })
      await newWarningInfoData({STATIONCODE:list,endtime,stateTime}).then(async res => {
        if (res.code == 200) {
          this.newCompanyTqList = res.data
          await this.setNewMarker();
        }
      })
    },
    //渲染区域点天气信息
    async setNewMarker(){
      let list = []
      if (this.renderPointsList != undefined){
        list = this.renderPointsList
      }else {
        list = this.newCompanyTqList
      }
      let that = this;
      this.listNewTq = [];
      list.map(async (item) => {
        let info = [];
        info.push(
          '<div class="mapMakerInfo">' +
          '<div class="titleMaker" style="display: flex;">' +
          '<div class="makerTitleSty">${text}</div><div class="makerTitleStyVal"> ${obsTime}</div>' +
          '</div>'
        );
        info.push('<div class="makerData"><span class="makerDataTitle">温度</span><span class="makerValSty"> ${temp}℃</span></div>')
        // info.push(
        //   '<p><span>风向 : ${windDir}</span><span style="margin-left: 15px;">风力等级 : ${windScale}</span></p>'
        // );
        info.push(
          '<div class="makerData"><span class="makerDataTitle">风速</span><span class="makerVal"> ${windSpeed} km/H</span><span class="makerVal" style="margin-left: 0.5rem;"> ${windDir}</span></div>'
        );
        info.push(
          '<div class="makerData"><span class="makerDataTitle">降水量</span><span class="makerVal"> ${precip} mm/H</span></div>'
        );
        info.push(
          '<div class="makerData"><span class="makerDataTitle">气压</span><span class="makerVal"> ${pressure} Hpa</span></div>'
        );
        info.push(
          '<div class="makerData"><span class="makerDataTitle">能见度</span><span class="makerVal"> ${vis} km</span></div>'
        );
        info.push('<div class="makerData"><span class="makerDataTitle">相对湿度</span><span class="makerVal"> ${humidity}%</span></div></div></div>');

        let data = info.join("");
        // data = data.replace('${icon}', item.icon)
        data = data.replace("${text}", item.STATIONNAME||'0');
        data = data.replace("${temp}", item.AIRTEMP_CURRENT_VALUE||'0');
        data = data.replace("${obsTime}", formatDateTime(item.HAPPENTIME));
        data = data.replace("${windDir}", getFX(item.WIND_CURRENT_DIRVALUE));
        data = data.replace("${windScale}", item.WIND_CURRENT_POWERVALUE||'0');
        data = data.replace("${windSpeed}", item.WIND_CURRENT_SPEEDVALUE||'0');
        data = data.replace("${humidity}", item.RH_CURRENT_VALUE||'0');
        data = data.replace("${precip}", item.RAIN_SUM_CURHOUR_VALUE||'0');
        data = data.replace("${pressure}", item.SEAPRESSURE_CURRENT_VALUE||'0');
        data = data.replace("${vis}", item.VISIBILITY_CURRENT_VALUE||'0');
        let infoWindow = new AMap.InfoWindow({
          content: data,
          // offset: new AMap.Pixel(5, -30),
        });
        let marker = new AMap.Marker({
          content: `<div style="color: #393eff">
                        <div style="width: 80px">${item.STATIONNAME}</div>
                        <div style="width: 10px;height:10px;border-radius: 50%;background-color: #ffffff;border: 3px solid #5b5b5b"></div>
                    </div>`,
          map: this.map,
          position: new AMap.LngLat(item.STATIONLON, item.STATIONLAT),
          // offset: new AMap.Pixel(-13, -30)
        });
        marker.on("mouseover", function () {
          infoWindow.open(that.map, [
            marker.getPosition().lng,
            marker.getPosition().lat,
          ]);
        });
        marker.on("mouseout", function () {
          infoWindow.close();
        });
        this.listNewTq.push(marker);
      });
      this.loadingQy = false;
    },

    //获取预警数据
    async getWarning() {
      this.loading = true;
      this.emptyingPointsYj();
      this.companyYjList = [];
      cityInformation.map(async (item) => {
        let resJson = await warnIngInfo({
          location: item.id,
          lang: "zh",
          cityName: item.name,
        });
        let res = await JSON.parse(resJson.msg);
        // let resJson = await warningInfoNew()
        // let resJsonNew = resJson.msg.replace(/\uFEFF/, '');//处理ZWNBSP (零宽度不断行空格)
        // let res = JSON.parse(resJsonNew)
        // console.log(JSON.parse(resJsonNew),222222)

        if (res.warning.length != 0) {
          this.companyYjList.push({
            ...item,
            warning: res.warning[0],
          });
        } else {
          this.companyYjList.push({ ...item });
        }
        if (cityInformation.length <= this.companyYjList.length) {
          localStorage.setItem("nowDataTime", formatDate(new Date()));
          localStorage.setItem(
            "companyYjList",
            JSON.stringify(this.companyYjList)
          );
          this.loading = false;
          await this.setMarkerWarning();
        }
      });
      // this.companyYjList = csDataLHYLLWrinIng
      // await this.setMarkerWarning()
    },
    //根据选中数据渲染天气点信息
    async renderPoints(list){
      this.renderPointsList = list
      this.emptyingPointsNewTq()
      await this.setNewMarker();
    },
    //收起/下拉
    shrink(show){
      let myDiv = document.getElementsByClassName('tableInfo')
      console.log(myDiv[0],123)
      if(show){
        myDiv[0].style.height = '300px'
      }else {
        myDiv[0].style.height = '50px'
      }
    },
    //渲染预警点数据
    async setMarkerWarning() {
      let that = this;
      this.listYj = [];
      this.companyYjList.map(async (item) => {
        if (item.warning) {
          let info = [];
          info.push(
            '<div style="padding:7px 0px 0px 0px;width: 400px"><div style="font-size: 16px"><span style="padding: 10px;font-weight: 600;color: ${color}">${title}</span></div>'
          );
          info.push(
            '<p style="padding: 10px;border-top: 0.5px solid #7a7a7a">预警详细 : ${text}</p></div></div>'
          );

          let data = info.join("");
          data = data.replace("${title}", item.warning.title);
          data = data.replace("${color}", item.warning.severityColor);
          data = data.replace("${text}", item.warning.text);
          let infoWindow = new AMap.InfoWindow({
            content: data,
            offset: new AMap.Pixel(5, -30),
          });
          const newIcon = new AMap.Icon({
            size: new AMap.Size(50, 50), // 图标尺寸
            image: require(`../assets/mapWrinIngImage/${item.warning.type}-${item.warning.severityColor}.jpg`), // Icon的图像
            imageSize: new AMap.Size(50, 50), // 图标尺寸
          });
          let marker = new AMap.Marker({
            map: this.map,
            position: new AMap.LngLat(item.lon, item.lat),
            offset: new AMap.Pixel(-13, -75),
            icon: newIcon,
          });
          marker.on("mouseover", function () {
            infoWindow.open(that.map, [
              marker.getPosition().lng,
              marker.getPosition().lat,
            ]);
          });
          marker.on("mouseout", function () {
            infoWindow.close();
          });
          this.listYj.push(marker);
        }
      });
    },
    //渲染风向数据
    setMarkerFx() {
      this.listFx = [];
      this.companyTqList.map(async (item) => {
        // 根据风向设置图片路径
        let windDirImageMap = {
          北风: require("../assets/images/beifeng.png"),
          东北风: require("../assets/images/dongbeifeng.png"),
          东风: require("../assets/images/dongfeng.png"),
          东南风: require("../assets/images/dongnanfeng.png"),
          南风: require("../assets/images/nanfeng.png"),
          西南风: require("../assets/images/xinanfeng.png"),
          西风: require("../assets/images/xifeng.png"),
          西北风: require("../assets/images/xibeifeng.png"),
        };

        let imagePath =
          windDirImageMap[item.windDir] || require("../assets/images/xifeng.png"); // 默认图片路径

        let marker = new AMap.Marker({
          content: `<div style="width: 80px; color: #393eff">
                  <img src="${imagePath}" alt="${item.windDir}" style="width: 30px; height: 30px;">
                  <span style="font-size: 14px">${item.windScale}级</span>
                </div>`,
          map: this.map,
          position: new AMap.LngLat(item.lon, item.lat),
          offset: new AMap.Pixel(-10, -20),
        });
        this.listFx.push(marker);
      });
    },
    //渲染降水信息
    setMarkerJs() {
      this.listJs = [];
      this.companyTqList.map(async (item) => {
        let marker = new AMap.Marker({
          content: `<div><i style="color: #393eff;font-size: 18px" class="qi-309"/><div style="font-size: 12px">${item.precip}mm/h</div></div>`,
          map: this.map,
          position: new AMap.LngLat(item.lon, item.lat),
          offset: new AMap.Pixel(-50, 5),
        });
        this.listJs.push(marker);
      });
    },
    //渲染湿度信息
    setMarkerSd() {
      this.listSd = [];
      this.companyTqList.map(async (item) => {
        let marker = new AMap.Marker({
          content: `<div><i style="color: #393eff;font-size: 18px" class="qi-399"/><div style="font-size: 12px">${item.humidity}%</div></div>`,
          map: this.map,
          position: new AMap.LngLat(item.lon, item.lat),
          offset: new AMap.Pixel(40, 5),
        });
        this.listSd.push(marker);
      });
    },
    getSliderVal() {
      this.map.remove(this.myImageLayer);
      this.myImageLayer = [];
      this.setImageLeiDaInfo(this.leiDanfoData || []);
    },
    //获取雷达图层信息
    async getLeiDaInfo() {
      let nowTime = new Date();
      nowTime.setHours(nowTime.getHours() - 2);
      nowTime.setSeconds(nowTime.getSeconds() - 60 * 6);
      this.leiDanfoData = [];
      for (let x = 0; x < 20; x++) {
        nowTime.setSeconds(nowTime.getSeconds() + 60 * 6);
        let year = nowTime.getFullYear().toString();
        let month =
          nowTime.getMonth() + 1 < 10
            ? "0" + (nowTime.getMonth() + 1)
            : nowTime.getMonth() + 1;
        let date =
          nowTime.getDate() < 10 ? "0" + nowTime.getDate() : nowTime.getDate();
        let hours =
          nowTime.getHours() < 10
            ? "0" + nowTime.getHours()
            : nowTime.getHours();
        let seconds =
          nowTime.getMinutes() < 10
            ? "0" + nowTime.getMinutes()
            : nowTime.getMinutes();
        this.leiDanfoData.push({
          // url:`http://sdsqxt.cn:15010/products/Radar/Sradar/${year}/${month}/${date}/${year.substring(2,4)}${month}${date}${hours}${seconds}_000.png`,
          url: `https://mail.aid-bee.cn/prod-api/profile/leida/${year.substring(
            2,
            4
          )}${month}${date}${hours}${seconds}_000.png`,
          // url:`${window.location.origin}/prod-api/profile/leida/${year.substring(2,4)}${month}${date}${hours}${seconds}_000.png`,
          time: formatDate(nowTime),
        });
      }
      this.setImageLeiDaInfo(this.leiDanfoData || []);
    },
    //渲染雷达数据
    setImageLeiDaInfo(data) {
      let that = this;
      let imageLayer = new AMap.ImageLayer({
        url: data[that.sliderVal].url,
        bounds: new AMap.Bounds(
          [114.494998931, 33.6750011444], //33.6750011444,114.494998931
          [123.837891144, 38.7883461444] //38.7883461444,123.8378911444
        ),
        zooms: [1, 20],
        opacity: 1,
      });
      this.map.add(imageLayer);
      this.myImageLayer.push(imageLayer);
    },
    //播放雷达图层
    playLay() {
      if (!this.lastDatar) {
        this.sliderPlay = !this.sliderPlay
        this.lastDatar = setInterval(() => {
          this.getSliderVal();
          this.sliderVal++;
          if (this.sliderVal == 20) {
            this.sliderPlay = true
            this.sliderVal = 0;
            this.getSliderVal();
            clearInterval(this.lastDatar);
            this.lastDatar = null;
          }
        }, 1000);
      }
    },
    //上一个
    previousMap(){
      this.getSliderVal();
      this.sliderVal--;
    },
    //下一个
    nextMap(){
      this.getSliderVal();
      this.sliderVal++;
    },
    //暂停雷达图层
    playLayOff(){
      clearInterval(this.lastDatar);
      this.sliderPlay = true
      this.lastDatar = null;
    },
    //清空气象点坐标
    emptyingPointsTq() {
      if (this.listTq.length != 0) {
        this.listTq.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listTq);
      }
      this.listTq = [];
    },
    //清空区域站点坐标
    emptyingPointsNewTq(){
      if (this.listNewTq.length != 0) {
        this.listNewTq.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listNewTq);
      }
      this.listNewTq = [];
    },
    //清空预警点坐标
    emptyingPointsYj() {
      if (this.listYj.length != 0) {
        this.listYj.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listYj);
      }
      this.listYj = [];
    },
    //清空风向点坐标
    emptyingPointsFx() {
      if (this.listFx.length != 0) {
        this.listFx.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listFx);
      }
      this.listFx = [];
    },
    //清空降水点坐标
    emptyingPointsJs() {
      if (this.listJs.length != 0) {
        this.listJs.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listJs);
      }
      this.listJs = [];
    },
    //清空湿度点坐标
    emptyingPointsSd() {
      if (this.listSd.length != 0) {
        this.listSd.forEach((e) => {
          e.setMap(null);
        });
        this.map.remove(this.listSd);
      }
      this.listSd = [];
    },
    checkOpen(index){
      if (this.checkedList.indexOf(index) != -1){
        this.checkedList.splice(this.checkedList.indexOf(index),1)
      }else {
        this.checkedList.push(index)
      }
      this.checkboxChange()
    },
    checkboxChange() {
      //气象
      if (this.checkedList.indexOf(1) != -1) {
        if (this.companyTqList.length == 0) {
          if (this.weatherLastDatar) {
            clearInterval(this.weatherLastDatar);
          }
          this.getWeather();
          this.getNewWeather();
          this.weatherLastDatar = setInterval(() => {
            this.getWeather();
            this.getNewWeather();
          }, 1000 * 60 * 10);
        } else {
          this.emptyingPointsTq();
          this.emptyingPointsNewTq();
          this.setMarker();
          this.setNewMarker();
        }
      } else {
        if (this.weatherLastDatar) {
          clearInterval(this.weatherLastDatar);
        }
        this.emptyingPointsTq();
        this.emptyingPointsNewTq();
      }
      //预警
      if (this.checkedList.indexOf(2) != -1) {
        if (this.companyYjList.length == 0) {
          let oldData = localStorage.getItem("nowDataTime");
          if (oldData == null) {
            this.getWarning();
          } else {
            let date = new Date(oldData).getTime();
            let nowData = new Date().getTime();
            let diff = nowData - date;
            if (diff >= 1000 * 60 * 60 * 6) {
              this.getWarning();
            } else {
              this.companyYjList = JSON.parse(
                localStorage.getItem("companyYjList")
              );
              this.setMarkerWarning();
            }
          }
        } else {
          this.emptyingPointsYj();
          this.setMarkerWarning();
        }
      } else {
        this.emptyingPointsYj();
      }
      //雷达
      if (this.checkedList.indexOf(3) != -1) {
        if (this.leiDaLastDatar) {
          clearInterval(this.leiDaLastDatar);
        }
        this.getLeiDaInfo();
        this.leiDaLastDatar = setInterval(async () => {
          if (this.myImageLayer.length > 0) {
            this.map.remove(this.myImageLayer);
          }
          await this.getLeiDaInfo();
        }, 1000 * 60 * 15);
      } else {
        if (this.leiDaLastDatar) {
          clearInterval(this.leiDaLastDatar);
        }
        this.map.remove(this.myImageLayer);
      }
      //风向
      if (this.checkedList.indexOf(4) != -1) {
        this.emptyingPointsFx();
        this.setMarkerFx();
      } else {
        this.emptyingPointsFx();
      }
      //降水量
      if (this.checkedList.indexOf(5) != -1) {
        this.emptyingPointsJs();
        this.setMarkerJs();
      } else {
        this.emptyingPointsJs();
      }
      //相对湿度
      if (this.checkedList.indexOf(6) != -1) {
        this.emptyingPointsSd();
        this.setMarkerSd();
      } else {
        this.emptyingPointsSd();
      }
      if (this.checkedList.indexOf(7) != -1) {
        this.$router.push({
          path:'/wxIndex'
        })
      }
    },
  },
}
</script>

<style scoped lang="stylus">
.bodyMap{
  background-color: #60AEFF;
  //display: flex;
  //flex-direction: row;
  //position: relative
}
.radarPane {
  z-index: 31;
  width: 40px;
  background-color: #fff !important;
  border-radius: 0.25rem !important;
  position: absolute !important;
  left: 91% !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
  bottom: 70px;
  margin-bottom: 0.5rem !important;
  font-size: 10px;
}
.colorbar {
  width: auto;
  margin: 5px 10px;
}
.slider {
  padding: 10px 50px;
  opacity: 9;
}
.row-block {
  width: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #444;
  border-right-width: 1px;
}
.one {
  //flex: 1;
  height: 20px;
  text-align: center;
}
.text{
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 16px;
}
.mapPlayComp{
  background-color: #FFFFFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .mySlider{
    margin-left: 10px;
    width: 75%;
  }
}
.mapButton{
  padding: 15px;
  background-color: #F3FEFE;
  .menuText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .menuTextCol{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #00afff;
  }
  .menuImg{
    height: 30px;
    width: 30px;
    margin-bottom: 5px;
  }
}
.tableInfo{
  margin 0
  //background: #FFFFFF;
  height: 300px
  width: 380px
  //box-shadow: 0px (15/96)rem (30/96)rem (10/96)rem rgba(214,223,239,0.42);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
}
</style>
